<template>
<div class="clips_hot clearFix">
    <!-- 侧拉部分 -->
   <div class="clips_hot_slide" style="z-index: 1000;" v-show="read">
    
      <div class="hot_slide_icon">
            
      </div>

      <div class="slide_icon_list">
         <ul>
            <li v-for='(hot,index) in hotData' key='index' >
               <img :src="[hot.src]" @click='keyStyle(index)' class="img">
            </li>
         </ul>
      </div>

   </div>

  <div class="clips_hot_content ">
  	
  	<div class="ofans_headers clearFix" style="z-index: 1000;">
  		<div class="ofans_headers_left" @click='toggle_slide'>
  			<img src="../../../static/images/1/main_menu_normal.png">
  		</div>
  		<p>热榜</p>
  		<div class="ofans_headers_right">
  			<img src="../../../static/images/1/main_search_pressed.png">
  		</div>
   </div>
	 <div >
	 	
	     <clips_list></clips_list>
	
	     <ofans_footers class=' clips_foot '></ofans_footers>
	     
     </div>

   </div>

    <!-- 加载登录组件 -->

  <div class="clips_login_page">
    
      <Clips_login style='z-index: 1200;'></Clips_login>

  </div>  
  
  </div>
</template>

<script>

//import ofans_headers from '../../pages/ofans_headers.vue';

import clips_list from '../../pages/clips/clips.vue';

import ofans_footers from '../../pages/ofans_footers.vue';

import Clips_login from '../../pages/clips/clips_comment/clips_login.vue';

// require('../../less/clips/clips_slides.less');

export default {
  
    name:'clips',

    data(){

      return{

         read:false,
        hotData:[
          {

            src:'../../../static/images/2/menu_hot_normal.png',

            src_select:'../../../static/images/2/menu_hot_selected.png'


          },
           {

            src:'../../../static/images/2/menu_netdrama_normal.png',

            src_select:'../../../static/images/2/menu_netdrama_selected.png'

          },
           {

            src:'../../../static/images/2/menu_netprogram_normal.png',

            src_select:'../../../static/images/2/menu_netprogram_selected.png'


          },
           {

            src:'../../../static/images/2/menu_movie_normal.png',

            src_select:'../../../static/images/2/menu_movie_selected.png'


          },
           {

           src:'../../../static/images/2/menu_tv_normal.png',

           src_select:'../../../static/images/2/menu_tv_selected.png'


          },
           {

           src:'../../../static/images/2/menu_show_normal.png',

           src_select:'../../../static/images/2/menu_show_selected.png'


          },

         {

            src:'../../../static/images/2/menu_favorite_normal.png',

            src_select:'../../../static/images/2/menu_favorite_selected.png'

          }
        ]
      }

    },
    methods:{

      keyStyle(index){

        var img = document.querySelectorAll('.img');

          for(var i in {...img}){

              img[i].src=this.hotData[i].src;

          }
        

          img[index].src = this.hotData[index].src_select;

          //点击获取登录界面；
 
          var clips_login_page  = document.querySelector('.clips_login_page');


          setTimeout(function(){

            clips_login_page.style.display = 'block';


          },1000) 
           
      },
      toggle_slide(){
      	
        this.read = !this.read;
      		
      	var clips_active = document.querySelector('.clips_hot_movie ul');
      	
      	var clips_foot = document.querySelector('.clips_foot');
      	
      	var clips_head = document.querySelector('.ofans_headers');
      	
      	var banner = document.querySelector('.el-carousel');
      	
      	var button = document.querySelectorAll('.el-carousel button');

	
      	if(this.read == true){
      		
      		clips_active.className = 'clips_active';
      		
      		clips_foot.className = 'clips_foot clips_foot_active';
      		
      		clips_head.className = 'ofans_headers clips_foot_active'
      		
      		banner.className = 'el-carousel banner';
      		
      		 button[0].style.display = 'none';
      		 
      		 button[1].style.display = 'none';
      		 
      		
      		 
      		
      	}
      	else{
      		
      		clips_active.className = '';
      		
      		clips_foot.className = 'clips_foot';
      		
      		clips_head .className = 'ofans_headers';
      		
      		banner.className = 'el-carousel ';
      		
      		 button[0].style.display = 'none';
      		 
      		 button[1].style.display = 'none';
      		 
      		
      		
      	}
      	
      }

    },

    components:{

      clips_list,

      ofans_footers,

      Clips_login

    }

}
</script>
<style type="text/css" scoped lang='less'>
.ofans_headers{
	
	height:80/64rem;

	margin:0 auto;

	background-Color:rgb(165,75,232);

	position:relative;

}
.ofans_headers_left img{
	
	height:30/64rem;

	width:40/64rem;

	margin-left:30/64rem;

	margin-top:25/64rem;

}

.ofans_headers>p{

	height:80/64rem;

    font-size:36/64rem;
    
    line-height:80/64rem;
   
    color:#fff;

    font-famliy:'Arial';

    width:((640-30*2-40-35)/640)*100%;

    text-align:center;

}
.ofans_headers_right img{
	
	height:35/64rem;

	width:35/64rem;

}
.ofans_headers_right{
	
	position:absolute;

	right:30/64rem;

	bottom:22.5/64rem;

}
.ofans_headers_left,.ofans_headers>p,.ofans_headers_right{
	
float:left;


}
.clearFix::after{
	
	content:'';

	clear:both;

	display:block;

}
 .clips_hot{
 	
  	.clips_foot_active{
		
		position:absolute;
		
		width:(300*2+20)/64rem;
		
	    left: 260/64rem;		
	}
    .clips_hot_slide{

       width:260/640*100%;

       position: absolute;

       height: 1200/64rem;

       background: url('../../../static/images/2/menu_bg.png') no-repeat;

       background-size: cover;

       img{
            width: 260/64rem;
       }
       

    }

    .toggle_content{

      position: absolute;

      left:260/64rem;

    }
    .toggle_content {

       
    }
  }
 .clips_hot{

    .clips_hot_slide{
         
        .hot_slide_icon{

          height: 80/64rem;

          width: 130/64rem;

          background: url('../../../static/images/4/login_logo.png') no-repeat;

          background-size: 130/64rem 80/64rem;

          border-top: 1/64rem solid transparent;

          margin: 100/64rem auto;

        }
        .slide_icon_list ul li{

                height: 40/64rem;

                width: 114/64rem;

                margin: 74/64rem auto;

            img{

                height: 40/64rem;

                width: 114/64rem;

                

            }

        }

    }

    .clips_login_page{

        display: none;

    }
  }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
body {
  background: #f0f2f5;
  font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  font-size: 25/64rem;
  color: #444;
}




</style>